<template>
    <div class="personal-details">
      <div class="head">
        <div class="back">
          <div class="back-icon" @click="back"></div>
          <div class="title">个人信息</div>
        </div>
        <div class="save">
          <div class="save-icon"></div>
          <div class="save-edit">保存修改</div>
        </div>
      </div>
      <div class="content">
        <div class="board" style="margin-top: 10px;">
          <div class="details">
            <div class="avartar">
              <div class="photo">
                <img src="@/assets/personal/default-avartar.png" alt="图片" class="photo-img">
              </div>
              <div class="photo-icon"></div>
            </div>
            <div class="detail">
              <div class="detail-item">
                <div class="title2" style="margin-left: 24px;">姓名</div>
                <div class="detail-info">{{ form.name }}</div>
              </div>
              <div class="detail-item">
                <div class="title2" style="margin-left: 24px;">职称</div>
                <div class="detail-info">{{ form.job }}</div>
              </div>
              <div class="detail-item">
                <div class="title2">所属学校</div>
                <div class="detail-info">{{ form.school }}</div>
              </div>
              <div class="detail-item">
                <div class="title2">任教学科</div>
                <div class="detail-info">{{ form.subject }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="board">
          <div class="contact">
            <div class="title3">联系方式</div>
            <div class="content-2">
              <div class="content-item">
                <div class="title4">手机号码</div>
                <div class="detail-info">{{ form.phone }}</div>
              </div>
              <div class="content-item">
                <div class="title4">电子邮箱</div>
                <div class="detail-info">{{ form.email }}</div>
              </div>
              <div class="content-item">
                <div class="title4">办公室</div>
                <div class="detail-info">{{ form.office }}</div>
              </div>
              <div class="content-item"></div>
            </div>
          </div>
        </div>
        <div class="board">
          <div class="contact">
            <div class="title3">账号信息</div>
            <div class="content-2">
              <div class="content-item">
                <div class="title4">账号ID</div>
                <div class="detail-info">{{ form.ID }}</div>
              </div>
              <div class="content-item">
                <div class="title4">账号状态</div>
                <div class="safe-status" :class="{'unsafe-status':form.safe!== true}">
                  <div class="dot" :class="{'dot-unsafe':form.safe !== true}"></div>
                  <div class="safe-text" v-if="form.safe === true">安全</div>
                  <div class="safe-text" v-else>风险</div>
                </div>
              </div>
              <div class="content-item">
                <div class="title4">密码</div>
                <div class="detail-info" v-if="!showPassword">***********</div>
                <div class="detail-info" v-else>{{ form.password }}</div>
                <div class="eye-closed" :class="{'eye-open':showPassword === true }" @click="passwordShown"></div>
              </div>
              <div class="content-item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const showPassword = ref(false)
const form = ref({
  name: '艾小蓓',
  job: '高级教师',
  school: '福州第一中学',
  subject: '数学',
  phone: '12345678909',
  office: '教学楼B区401',
  email: '1234567809@qq.com',
  ID: '12345678909',
  password: '12345678909',
  safe: true
})
function back(){
  router.back()
}
function passwordShown(){
  showPassword.value = !showPassword.value
}
</script>

<style scoped lang="less">
@import url('@/views/person-details/index.less');
</style>